<template>
	<view>
		<view class="c-box" id="followMine">
		    <view class="my">
		        <view class="mt">
					<person-header :currentUser="currentUser"></person-header>
		        </view>
		    </view>
		    <view class="browsingHistory">
		        <view v-if="type=='attentionMine'||type=='phone'">
		            <view class="mt">共<view class="span" >{{historyCount}}</view>位用户关注了您</view>
		        </view>
		        <view v-if="type=='tagsMine'">
		            <view class="mt">共<view class="span" >{{historyCount}}</view>位用户给您点赞</view>
		        </view>
		        <view v-if="type=='collectMyProduct'||type=='collectMyDemand'">
		            <view class="mt">共<view class="view" >{{historyCount}}</view>位用户收藏了您的商品</view>
		        </view>
		
		        <view class="mb">
		            <view class="ul">
		                <view v-for="(item,index) in showHistory">
		                    <view class="li">
		                        <view class="a"  @click="enterPersonalByType(item)">
		                            <view class="img"><img :src="item.portrait?item.portrait:'img/wutouxiang.png'" /></view>
		                            <view class="name" >{{item.company?item.company:(item.userName?item.userName:'匿名')}}</view>
		                            <view class="time" >{{item.createAt}}</view>
		                        </view>
		                    </view>
		                </view>
		            </view>
		        </view>
		    </view>
		    <view class="lastLine">暂无更多浏览记录</view>
		</view>
	</view>
</template>

<script>
	import statisticsApi from '@/api/statistics.js'
	import commonApi from '@/utils/commonMethod.js';
	import personHeader from "../../components/person/personHeader.vue";
	
	export default {
		components: {
			personHeader
		},
		data() {
			return {
				currentUser: {},
				showHistory: [],
				historyCount: '',
				loading: true,
				noMore: false,
				noData: false,
				search: {
					totalPage:'',
					page: 1,
					limit: 10,
				},
				requestType:'',
				productId:'',
				demandId:'',
				type:'',
				
				startTime:'', //进入页面时间
				endTime:'',//离开页面时间
				currentUrl:'',//当前页面全路径
			}
		},
		async onLoad(options) {
				this.type = options.type,
				this.productId = options.productId,
				this.demandId = options.demandId
			
		        //获取当前用户
		        const currentPromise = await commonApi.currentUserAxios()
		        this.currentUser = currentPromise.data.session_user_h5
		        switch (this.type) {
		            case 'collectMyProduct':
						uni.setNavigationBarTitle({
							title:'收藏量'
						})
		                this.requestType = [1]
		                break;
		            case 'collectMyDemand':
		                this.requestType = [2]
		                break;
		            case 'attentionMine':
						uni.setNavigationBarTitle({
							title:'粉丝量'
						})
		                this.requestType = [3]
		                break;
		            case 'tagsMine':
						uni.setNavigationBarTitle({
							title:'获赞量'
						})
		                this.requestType = [5,10]
		                break;
		        }
		        this.getList()
				const pages = getCurrentPages()
				const currentPage =pages[pages.length - 1]
				this.currentUrl = currentPage.$page.fullPath
		    },
			onShow(){
			  
			  setTimeout(()=> {
			    
			    if (getApp().globalData.onShow) {
			      getApp().globalData.onShow = 0;
			      console.log("demo前后台切换之切到前台")
			    }
			    else {
			      console.log("demo页面被切换显示")
			      this.startTime = +new Date();
			    }
			    
			  }, 100);
			},
			onHide(){
			  setTimeout(() => {
			    var that = this
			    if (getApp().globalData.onHide) {
			      getApp().globalData.onHide = 0;
			      console.log("还在当前页面活动")
			    }
			    else {
			      that.endTime = +new Date();
			      console.log("demo页面停留时间：" + (that.endTime - that.startTime))
			      var stayTime = Math.round((that.endTime - that.startTime)/1000);
			       //这里获取到页面停留时间stayTime，然后了可以上报了
			       this.saveFootPrint(stayTime);
			    }
			  }, 100)
			},
			onUnload(){
			    setTimeout(() => {
			    var that = this
			    if (getApp().globalData.onHide) {
			      getApp().globalData.onHide = 0;
			      console.log("还在当前页面活动")
			    }
			    else {
			      that.endTime = +new Date();
			      console.log("demo页面停留时间：" + (that.endTime - that.startTime))
			      var stayTime = Math.round((that.endTime - that.startTime)/1000);
			       //这里获取到页面停留时间stayTime，然后了可以上报了
			       this.saveFootPrint(stayTime);
			    }
			  }, 100)
			},
		    mounted(){
		    },
		    methods: {
				saveFootPrint(stayTime){
				    commonApi.saveFootPrint(this.currentUser.id,this.startTime,stayTime,this.currentUrl,"获赞量")
				  			
				},
		        async getList(){
		            //根据type获取收藏数量,3.关注人 4.点赞
		            await commonApi.getCollectMineByType(this.currentUser.id,this.requestType, this.productId,this.demandId).then(res =>{
						this.historyCount = res.data.countAndList.count
						this.showHistory = res.data.countAndList.list
					})
		        },
				enterPersonalByType(item){
					commonApi.enterPersonalByType(item)
				}
				
		    },
			
	}
</script>

<style>
	.my .mt {
		/* height: 5.733333rem; */
		background: url(https://m.nocexpo.com/statics/js/modules/h5/img/img15.jpg) no-repeat;
		background-size: 100% auto;
		overflow: hidden;
		margin-bottom: 28rpx;
		background-color: #fff;
		height: auto;
	}
	.browsingHistory .mt {
		padding: 0 28rpx;
		line-height: 56rpx;
		font-size: 22rpx;
		color: #333333;
		display: flex;
	}
	.browsingHistory .mt .span {
	    color: #029e9d;
	}
	.browsingHistory .mb {
	    background: #fff;
	    padding: 14rpx 28rpx;
	}
	.ul {
		list-style: none;
	}
	.browsingHistory .mb .li {
		overflow: hidden;
	}
	.browsingHistory .mb .li .a {
	    display: block;
	    padding: 14rpx 0;
	    overflow: hidden;
	    display: flex;
	    align-items: center;
	    justify-content: flex-start;
	}
	.browsingHistory .mb .li .img {
	    width: 56rpx;
	    height: 56rpx;
	    border-radius: 50%;
	    overflow: hidden;
	    float: left;
	    margin-right: 28rpx;
	}
	image{
		width: 100%;
	}
	.browsingHistory .mb .li .name {
	    float: left;
	    line-height: 93rpx;
	    font-size: 22rpx;
	    color: #333333;
	    width: 350rpx;
	    overflow: hidden;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	}
	.browsingHistory .mb .li .time {
	    float: right;
	    line-height: 93rpx;
	    margin-left: 21rpx;
	    font-size: 22rpx;
	    color: #8f9aa8;
	    white-space: nowrap;
	}
	.lastLine {
	    font-size: 20rpx;
	    color: #b0b2bf;
	    line-height: 70rpx;
	    text-align: center;
	    padding-bottom: 28rpx;
	    margin-top: 102rpx;
	}
</style>